<template>
  <div class="home">
    <div class="home_top" :class="[{ 'hide_tab_top': !showGameTab }]">
      <div class="home_top_bg"></div>
      <div class="home_top_con" :class="[{ 'hide_tab': !showGameTab }]">
        <HomeHeader />
        <!-- 游戏类型tab切换 -->
        <GameTypeTab :style="{ opacity: gameIsLoading || !showGameTab ? '0' : '1' }" :tabs="gameTabs"
          :activeId="isActive" :icon-base-url="settings.backend_upload" ref="gameTypeTabRef" @tab-click="handleTabs">
        </GameTypeTab>
      </div>

    </div>

    <div style="margin-top: 10px;" class="pk_swiper-container" v-if="gameTabs.length">
      <div class="pk_swiper-wrapper" :style="wrapperStyle">
        <div v-for="gameType in gameTabs" :key="gameType.id" class="swiper-slide">
          <div class="home_continental">
            <!-- 轮播图 -->
            <div class="swiperBox" v-if="showBannerArr && showBannerArr.length">
              <swiper :key="gameType.id" @realIndexChange="onBannerSwiperChange($event, gameType.id)"
                :pagination="pagination" :autoplay="true" :delay="3000" :disableOnIntercation="false" v-if="lang"
                slidesPerView="auto" :spaceBetween="10 - 10" :centeredSlides="true" :modules="modules">
                <swiper-slide v-for="(item, key) in showBannerArr" :key="key">
                  <img class="swiper_img" v-lazy="t(item)" :key="item" @click="goActivity(t(item))" fit="cover" />
                </swiper-slide>
              </swiper>
            </div>
            <div class="can_swiper_wrap">
              <nut-noticebar @across-end="acrossEnd" :speed="50" class="swiper_message"
                v-if="lang && noticeMessage && !noticeLoading"
                background="linear-gradient(180deg, #1B1F62 0%, #010223 100%)" color="#ffffff" :scrollable="true">
                <template #left-icon>
                  <img class="laba" :src="'/imgs/home/laba.webp'" :key="'laba'" alt="" />
                </template>
                <span v-html="noticeMessage"></span>
                <template #right-icon>
                  <iconpark-icon name="mail" size="16" @click="router.push('/email')" />
                  <div class="email_dot" v-if="myEmail.hasNoRead && isLocalLoggedIn"></div>
                </template>
              </nut-noticebar>
              <nut-noticebar :speed="50" class="swiper_message" v-else
                background="linear-gradient(180deg, #1B1F62 0%, #010223 100%)" color="#ffffff" :scrollable="true">
                <template #left-icon>
                  <img class="laba" :src="'/imgs/home/laba.webp'" :key="'laba'" alt="" />
                </template>
                <span></span>
                <template #right-icon>
                  <iconpark-icon name="mail" size="16" @click="router.push('/email')" />
                  <div class="email_dot" v-if="myEmail.hasNoRead && isLocalLoggedIn"></div>
                </template>
              </nut-noticebar>


              <!-- 登录入口 -->
              <ul v-if="!isLocalLoggedIn" class="common_login_box enter_login_box">
                <li>
                  <p>{{ t("home_page_not_login") }}</p>
                  <p class="text_color">{{ t("home_page_login_discount") }}</p>
                </li>
                <li>
                  <nut-animate type="ripple" action="click" @click="
                    async () => {
                      await User(pinia).setLogin(true);
                    }
                  ">
                    <div class="header_button login">{{ t("home_page_login") }}</div>
                  </nut-animate>
                  <nut-animate type="ripple" action="click" @click="openRegister">
                    <div class="header_button signup">{{ t("home_page_signUp") }}</div>
                  </nut-animate>
                </li>
              </ul>
              <!-- 登录后信息展示 -->
              <ul v-else class="common_login_box login_info_box">
                <li>
                  <div>
                    {{ userNameHiding(info.full_name || "") }}
                    <span class="vip_badge">{{ "VIP" + (VIPinfo.current_vip_level ?? "") }}
                    </span>
                  </div>
                  <!-- <div class="user_info_mon_text">￥{{ Intl.NumberFormat().format(roleInfo.money) }}</div> -->
                  <div class="user_info_mon_text">
                    ₫ {{ convert2DisplayMoney(roleInfo.money) }}
                  </div>
                </li>
                <li class="icon_list">
                  <div @click="router.push('/deposit')">
                    <ImgT src="/imgs/home/cunkuan.png" alt="" />
                    <span>{{ t("home_page_deposit") }}</span>
                  </div>
                  <div @click="router.push('/withdrawals')">
                    <ImgT src="/imgs/home/qukuan.png" alt="" />
                    <span>{{ t("withdraw_page_withdraw") }}</span>
                  </div>
                  <div @click="router.push('/myWallet')">
                    <ImgT src="/imgs/home/zhuanzhang.png" alt="" />
                    <span>{{ t("Transfer") }}</span>
                  </div>
                  <div @click="router.push('/vip')">
                    <ImgT src="/imgs/home/huangguang.png" alt="" />
                    <span>{{ t("hall_vip") }}</span>
                  </div>
                </li>
              </ul>
            </div>


            <div v-if="gameIsLoading"
              style="display: flex;align-items: center;justify-content: center;padding-top: 20px;">
              <LoadingCircle />
            </div>

            <template v-else>
              <div>
                <!-- 电子1-捕鱼2-棋牌5 视讯3-体育4-彩票6    -->
                <HomeGameDynamic2 v-if="[1, 2, 3, 4, 5, 6].includes(gameType.id) && gameType.id == isActive"
                  :tabInfo="gameType" />
                <!-- 俱乐部 -->
                <!-- <HomeClub v-if="gameType.id == 0 :tabInfo="gameType" /> -->

                <!-- 最近中奖 -->
                <HomeWinning v-if="gameType.id == -1" />

                <HomePromotions />
                <!-- 最新赛事 -->
                <HomeEvent v-if="[-1, 0].includes(gameType.id) && gameType.id == isActive" :type="true" />

                <!-- 热门和各类场馆游戏 -->
                <HomeGamebox v-if="gameType.id == -1 && gameType.id == isActive" />
              </div>
            </template>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { defineAsyncComponent, computed, onBeforeMount, onBeforeUnmount, onMounted, ref, watch, onActivated, onDeactivated, nextTick } from "vue";
import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { useI18n } from "vue-i18n";
import { Local } from "@/utils/storage";
import HomeHeader from "./components/homeHeader.vue";
import HomeWinning from "./components/homeWinning.vue";
import LoadingCircle from '@/components/LoadingCircle.vue';
import HomePromotions from "./components/homePromotions.vue";
import HomeEvent from "@/components/homeEvent.vue";
import GameTypeTab from "@/components/GameTypeTab.vue";
// import HomeClub from "./components/homeClub.vue";
import HomeGamebox from "./components/homeGamebox.vue";
import HomeGameCube from "./components/homeGameCube.vue";
import HomeGameDynamic from "./components/homeGameDynamic.vue";
import HomeGameDynamic2 from "./components/homeGameDynamic2.vue";
import { useSwipe } from '@/hooks/useSwipe';
import useImageLoader from "@/hooks/useImageLoader";
// import HomeCarouselControl from './components/homeCarouselControl.vue';
// import HomeGameHotBox from "./components/homeGameHotBox.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import { showToast } from "@nutui/nutui";
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import { useRouter } from "vue-router";
import eventBus from "@/lolo/eventBus";
// import PullRefresh from '@/components/PullRefresh.vue'
import { repMyGamesData } from "@/utils/useNetMethods";
import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";
import { User } from "@/store/user";
import { Page } from "@/store/page";
import { unserialize, convert2DisplayMoney } from "@/utils/useStoreMethods";
import { userNameHiding, enablePullToRefresh, disablePullToRefresh } from "@/utils/publicMethods";
import { joinURL } from '@/utils/publicMethods'

defineOptions({
  name: 'home'
})
defineAsyncComponent(() => import('@/views/game/index.vue'));

const currentIndex = ref(0);
const wrapperStyle = computed(() => ({
  transform: `translateX(-${currentIndex.value * 100}%)`
}));



const router = useRouter();
const page = Page(pinia);
const { gameIsLoading } = storeToRefs(page);
const {
  VIPinfo,
  info,
  isLocalLoggedIn,
  roleInfo,
  isLogin,
  myEmail
} = storeToRefs(User(pinia));
const {
  lang,
  bannerArr,
  settings,
  homeGameData,
  textAnnouncement,
  showLeft,
  activityList,
} = storeToRefs(Page(pinia));
const { t } = useI18n();
const isActive = ref(-1);
const refresh = ref(false);
const gameTypeTabRef = ref(null);
const gameTabs: any = computed(() => {
  const arr = [{
    id: -1,
    icon_h5: "/imgs/home/tab-1.webp",
    icon_h5_before: "/imgs/home/tab-1-1.webp",
    name: { "en-US": "All", "vi-VN": "tất cả", "zh-CN": "全部" },
  }]
  const arr2 = homeGameData.value.filter((e: any) => e.id != 0);
  return arr.concat(arr2)
})

const preLoadImgs = ref([]);
// const { loading } = useImageLoader(preLoadImgs);



const getQueryParams = (url: string) => {
  const paramArr = url.slice(url.indexOf("?") + 1).split("&");
  const params: any = {};
  paramArr.map((param) => {
    const [key, val] = param.split("=");
    params[key] = decodeURIComponent(val);
  });
  return params;
};
const goActivity = (url: string) => {
  if (isLocalLoggedIn.value) {
    let params = getQueryParams(url);
    if (params.category_jump == 1) {
      router.push({
        path: "/activityDetail",
        query: params,
      });
    }
  }
};

// 轮播图
const showBannerArr = computed(() => {
  if (isActive.value == -1) return bannerArr.value
  return bannerArr.value.filter((banner: any) => {
    const obj = getQueryParams(t(banner))
    if (!obj) return false
    const arr = obj.venue.split(',')
    return arr.includes(isActive.value.toString())
  })
})


// 消息轮播
const noticeLoading = ref(false)
const acrossEnd = () => { // 坑壁nut只触发一次轮播结束
  noticeLoading.value = true
  noticeMessage.value = getNoticeMessage()
  setTimeout(() => {
    noticeLoading.value = false
  }, 0)
}
const noticeMessage = ref('')
const getNoticeMessage = () => {
  let str = ''
  textAnnouncement.value.forEach((item: any, i: any) => {
    str += `<span style="margin-left:18rem">${item}</span>`
  })
  return str
}
watch(textAnnouncement.value, (val: any) => {
  if (val && val.length && !noticeMessage.value) {
    acrossEnd()
  }
}, { immediate: true })

const pagination = ref({
  clickable: true,
});
const modules = [Autoplay, Pagination];
// const navigation = ref({
//   nextEl: ".swiper-button-next",
//   prevEl: ".swiper-button-prev",
// });

const openRegister = async () => {
  await User(pinia).setReg(true);
};

const tabInfo = ref<any>({});
const handleTabs = (_val: any) => { // 切换分类
  Local.set("kingInfo", _val);
  isActive.value = _val.id;
  tabInfo.value = _val;
  const index = gameTabs.value.findIndex((a: any) => a.id == _val.id);
  currentIndex.value = index
  setTimeout(() => {
    setBg(t(showBannerArr.value[activeBannerIndex.value] || ''))
    window.scrollTo(0, 0);
  }, 0)
  gameTypeTabRef.value?.scrollToTab(_val.id);
  // 如果是全部的,情况2级tab的缓存
  if (_val.id === -1) {
    Local.remove('SECOND_TAB_SELECTED');
  }
};


// 缓存的分类项
const localKingInfo = Local.get("kingInfo")

if (localKingInfo) {
  handleTabs(localKingInfo);
}

const loadedAssets = ref(false)
watch(() => homeGameData.value, (dd: any) => {
  const ll: any = Local.get("kingInfo")
  if (dd && ll) {
    const tt: any = dd.find((a: any) => a.id == ll.id)
    if (tt) {
      Local.set("kingInfo", tt);
      handleTabs(tt);
    }
  }

  if (!loadedAssets.value) {
    const homeGames = dd[0]?.three_platform
    const _preLoadImgs = []
    if (homeGames?.length > 0) {
      homeGames.slice(0, 30).forEach((item: any) => {
        if (item.picture_h5) {
          _preLoadImgs.push(joinURL(settings.value.backend_upload, item.picture_h5))
        }
      })
      preLoadImgs.value = _preLoadImgs
      loadedAssets.value = true
    }
  }

}, { immediate: true })

// 是否显示游戏切换tab
const showGameTab = ref(true)

// 上个滚动位置
let lastScrollPosition = window.scrollY || document.documentElement.scrollTop || 0;
// 向下滑动距离
let scrollStartDownDistance = 0
// 定义滚动事件处理函数
let scrollTimeout: any = null
let currentScrollPosition = 0
let ticking = false;
const handleScroll = () => {
  currentScrollPosition = window.scrollY || document.documentElement.scrollTop;
  if (currentScrollPosition > lastScrollPosition) {
    if (!scrollStartDownDistance) {
      scrollStartDownDistance = currentScrollPosition
    }
    // 向下滑动超过20px,且距离顶部200px
    if (scrollStartDownDistance && currentScrollPosition - scrollStartDownDistance > 20 && currentScrollPosition > 200) {
      showGameTab.value = false;
    }
  } else {
    // 向上滑动
    scrollStartDownDistance = 0;
    showGameTab.value = true; // 向上滑动时设置为 true
  }
  // 更新上一个滚动位置
  lastScrollPosition = currentScrollPosition;
  if (scrollTimeout) clearTimeout(scrollTimeout)
  scrollTimeout = setTimeout(() => { // 滚动结束2s后自动展示
    showGameTab.value = true
  }, 2000)


  if (ticking || !actived.value || !homeElement) return // 变色banner图
  window.requestAnimationFrame(function () {
    const scrollTop = window.pageYOffset || window.scrollY ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;;
    ticking = false;
    // 透明度
    let opacity = 1
    if (scrollTop > 100 || scrollTop <= 0) {
      opacity = 1
    }
    opacity = (Math.abs(scrollTop)) / 100
    homeElement.style.setProperty(
      '--home-before-opacity',
      opacity
    );
    // 背景色
    if (currentScrollPosition > 100) {
      homeElement.style.setProperty(
        '--home-before-bg',
        defaultBgColor.value
      );
    } else {
      homeElement.style.setProperty(
        '--home-before-bg',
        lastBgColor.value
      );
    }
  });
  ticking = true;
};


// 最近中奖
const winningData: any = ref([[{}, {}, {}, {}, {}]]); //最近中奖
const handleRankList = async (res: any) => {
  const chunks = chunkArray(res.room_rank_list || [], 5);
  winningData.value = chunks;
  sessionStorage.setItem('winning_data', JSON.stringify(chunks))
};
const chunkArray = (array: any, size: number) =>
  Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
    array.slice(index * size, index * size + size)
  );

// 活动数据
const handleActivetys = async (res: any) => {
  await Page(pinia).setActivityTitleList(res.promo);
};




const actived = ref(false)
const initHomePage = () => {
  if (actived.value) return
  actived.value = true
  // 滚动到记录位置
  const scrollY = parseInt(sessionStorage.getItem('scrollY_home') || '0')
  if (Number(scrollY)) {
    window.scrollTo(0, scrollY)
  }
  setTimeout(() => {
    if (Number(scrollY)) {
      window.scrollTo(0, scrollY)
    }
    homeElement = document.querySelector('.home');
    window.addEventListener("scroll", handleScroll);
    setBg(t(showBannerArr.value[activeBannerIndex.value] || ''))
    handleScroll()
  }, 0)
  setTimeout(() => {
    if (Number(scrollY)) {
      window.scrollTo(0, scrollY)
    }
    homeElement = document.querySelector('.home');
    setBg(t(showBannerArr.value[activeBannerIndex.value] || ''))
    enablePullToRefresh()
    handleScroll()
  }, 400)
}

onMounted(() => {
  //最近中奖
  try {
    winningData.value = JSON.parse(sessionStorage.getItem('winning_data') || '[[{}, {}, {}, {}, {}]]')
  } catch { }
  setTimeout(() => {
    if (winningData.value && winningData.value[0] && winningData.value[0][0] && winningData.value[0][0].nickname) return
    const rankList = NetPacket.req_rank_with_player_list();
    PKwebsocket.instance.send(rankList, false, {
      callbackName: 'msg_notify_rank_with_player_list',
      callback: handleRankList
    })
  }, 0)

  // 活动数据
  if (!activityList.value || !activityList.value.length) {
    //获取所有活动
    const req = NetPacket.req_activites();
    req.show = 1;
    PKwebsocket.instance.send(req, false, {
      callbackName: 'msg_notify_activites',
      callback: handleActivetys
    })
  }

  initHomePage()
});


onBeforeUnmount(() => {
  // eventBus.off('window_visible')
  actived.value = false
})

onActivated(() => {
  initHomePage()
})
onDeactivated(() => {
  actived.value = false
  disablePullToRefresh()
  window.removeEventListener("scroll", handleScroll);
})


// banner图变化

// 获取 .home 元素
const lastBgColor = ref('')
const defaultBgColor = ref(`linear-gradient(180deg, rgb(16, 14, 38) 0%, rgba(16, 14, 38, 0.38) 38%, rgba(16, 14, 38, 0) 100%)`)
let homeElement = null
const setBg = (url: any) => {
  if (!homeElement || !url) return 
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // 处理跨域图片
  img.src = url
  img.onload = () => {
    const dominantColor = getDominantColor(img);
    lastBgColor.value = `linear-gradient(180deg, ${dominantColor.replace(')', ',0.3)')} 0%, ${dominantColor.replace(')', ',0.16)')} 42.86%, ${dominantColor.replace(')', ',0)')} 100%)`
    if (currentScrollPosition < 100) {
      try {
        homeElement.style.setProperty(
          '--home-before-bg',
          lastBgColor.value
        );
      } catch {
        homeElement.style.setProperty(
          '--home-before-bg',
          defaultBgColor.value
        );
      }
    }
  };
  img.onerror = () => {
    homeElement.style.setProperty(
      '--home-before-bg',
      defaultBgColor.value
    );
  }
}
// 提取颜色主色
function getDominantColor(imageElement) {
  // 创建canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置canvas尺寸与图片相同
  canvas.width = imageElement.naturalWidth || imageElement.width;
  canvas.height = imageElement.naturalHeight || imageElement.height;

  // 绘制图片到canvas
  ctx.drawImage(imageElement, 0, 0, canvas.width, canvas.height);

  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 统计颜色出现次数
  const colorCount = {};
  let maxCount = 0;
  let dominantColor = 'rgb(0, 0, 0)';

  // 遍历像素（可以抽样提高性能）
  for (let i = 0; i < data.length; i += 4 * 4) { // 每4个像素取样一次
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    const a = data[i + 3];

    // 忽略透明像素
    if (a < 128) continue;

    // 检查是否接近白色或黑色
    const isWhite = r > 230 && g > 230 && b > 230; // 接近白色
    const isBlack = r < 25 && g < 25 && b < 25;    // 接近黑色

    if (isWhite || isBlack) continue; // 跳过白色和黑色

    const color = `rgb(${r}, ${g}, ${b})`;

    colorCount[color] = (colorCount[color] || 0) + 1;

    if (colorCount[color] > maxCount) {
      maxCount = colorCount[color];
      dominantColor = color;
    }
  }

  // 如果没有找到非白/黑色，返回第一个非白黑色
  if (maxCount === 0) {
    for (let i = 0; i < data.length; i += 4 * 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      const a = data[i + 3];

      if (a < 128) continue;

      const isWhite = r > 230 && g > 230 && b > 230;
      const isBlack = r < 25 && g < 25 && b < 25;

      if (!isWhite && !isBlack) {
        return `rgb(${r}, ${g}, ${b})`;
      }
    }
  }

  return dominantColor;
}
const activeBannerIndex = ref(0)
const onBannerSwiperChange = (swiper: any, gId: any) => {
  if (gId == isActive.value) {
    activeBannerIndex.value = swiper.activeIndex
    setBg(t(showBannerArr.value[swiper.activeIndex] || ''))
  }
}

</script>
<style lang="scss">
.home {
  padding: 84px 0 100px;
  position: relative;
  padding-top: calc(84px + env(safe-area-inset-top));

  .pk_swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .pk_swiper-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
  }

  &::before {
    content: '';
    position: fixed;
    height: 300px;
    width: 100%;
    display: block;
    z-index: 0;
    top: 0;
    padding-top: env(safe-area-inset-top);
    pointer-events: none;
    transition: all ease 1s;
    /* 使用 CSS 变量控制背景渐变 */
    background: var(--home-before-bg, linear-gradient(180deg, rgba(16, 14, 38, 1) 0%,
          rgba(16, 14, 38, 0.38) 38%,
          rgba(16, 14, 38, 0) 100%));
  }

  .home_page_tab {
    >.nut-tabs__titles {
      display: none;
    }
  }

  .home_page_swiper {
    margin-top: 12px;
  }

  .home-loading-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: calc(45vh - 100px);
  }

  .home_top {
    height: calc(82px + env(safe-area-inset-top));
    will-change: height;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    transition: all cubic-bezier(0.33, 0, 0.67, 1) 0.4s;
    padding-top: calc(48px + env(safe-area-inset-top));

    .home_header {
      position: absolute;
      z-index: 10;
      top: env(safe-area-inset-top);
      transition: all cubic-bezier(0.33, 0, 0.67, 1) 0.4s;
    }

    .hide_tab {

      .custom_tab {
        opacity: 0;
        transition: all cubic-bezier(0.33, 0, 0.67, 1) 0.4s;
        overflow: hidden;

        .custom_tab_ul {
          opacity: 0;
          transition: all cubic-bezier(0.33, 0, 0.67, 1) 0.4s;
        }
      }
    }

    // .home_top_con {
    //   position: relative;
    //   z-index: 1;
    //   padding-top: 48px;
    //   width: 100%;
    //   height: 100%;
    // }

    .home_top_bg {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      z-index: 0;
      background-image: url(/imgs/home/public_bg.webp);
      background-size: 40% auto;
      opacity: var(--home-before-opacity, 0);
      transition: all cubic-bezier(0.33, 0, 0.67, 1) 0.4s;

      &::before {
        content: "";
        display: block;
        position: absolute;
        height: 300px;
        width: 100%;
        z-index: 0;
      top: 0; //env(safe-area-inset-top);
        pointer-events: none;
        transition: all ease 1s;

        background: var(--home-before-bg, linear-gradient(180deg, rgba(16, 14, 38, 1) 0%,
              rgba(16, 14, 38, 0.38) 38%,
              rgba(16, 14, 38, 0) 100%));
      }
    }


    .custom_tab {
      .custom_tab_ul {
        margin-bottom: 4px;
      }

      transition: all 0.3s;
      height: auto;
      opacity: 1;
    }
  }

  .hide_tab_top {
    transform: translateY(calc(48px - 82px));

    .home_top_bg {
      transform: translateY(calc(82px - 48px));
    }

    .home_header {
      transform: translateY(calc(82px - 48px));
    }
  }

  .laba {
    width: 16px;
  }

  .home_continental {
    // opacity: 0;

    &.showMain {
      opacity: 1;
      animation: fadeInPage 0.3s ease-in forwards;
    }

    .swiperBox {
      padding-bottom: 21px;
    }

    .swiper_message {
      display: block;
      width: 347px;
      height: 28px;
      margin: 0 auto;
      padding: 0;
      border-radius: 8px;

      .nut-noticebar__page-righticon {
        position: relative;
      }
    }

    .email_dot {
      position: absolute;
      top: -2px;
      right: -5px;
      height: 5px;
      width: 5px;
      border-radius: 50%;
      background-color: red;
      animation: dot-info-animal 1.6s infinite ease-in-out;
    }

    @keyframes dot-info-animal {
      0% {
        opacity: 0.3;
        transform: scale(0.9);
      }

      50% {
        opacity: 0.7;
        transform: scale(1.12);
      }

      100% {
        opacity: 0.3;
        transform: scale(0.9);
      }
    }

    .swiperBox {
      height: 162px;

      .swiper.swiper-horizontal {
        height: 162px;

        .swiper-pagination {
          bottom: -2px !important;

          .swiper-pagination-bullet {
            opacity: 1;
            background-color: #c7c5f4 !important;

            &.swiper-pagination-bullet-active {
              background-color: #302979 !important;
            }
          }
        }
      }
    }

    .swiper_message {
      .nut-noticebar__page {
        padding-left: 2px;
        padding-right: 4px;
        border-radius: 8px;
        height: 28px;

        .nut-noticebar__page-wrap {
          .nut-noticebar__page-wrap-content {
            font-size: 12px;
          }
        }
      }
    }
  }

  .common_login_box {
    gap: 0px;
    color: #fcfffa;
    margin: 8px 14px 14px;
    border-radius: 8px;
    background-color: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text_color {
      font-size: 12px;
      color: #c6c4f5;
      margin-top: 10px;
    }

    .login {
      text-align: center;
      width: 64px;
      line-height: 32px;
      gap: 0px;
      margin-right: 8px;
      border-radius: 8px;
      background: #282747;
      box-shadow: 0.5px 0.5px 1px 0px #4b4a6e inset;
    }

    .signup {
      text-align: center;
      width: 64px;
      line-height: 32px;
      gap: 0px;
      border-radius: 8px;
      background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
      box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
    }

    .user_info_mon_text {
      font-family: DINPro;
      font-size: 18px;
      font-weight: 700;
      font-style: normal;
      line-height: 18px;
      text-align: left;
      margin-top: 8px;
    }

    .icon_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // display: grid;
      // grid-template-columns: 1fr 1fr 1fr 1fr;
      // grid-column-gap: 2px;

      div {
        display: flex;
        flex-direction: column;
        //justify-content: space-between;
        align-items: center;
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }

        img {
          width: 36px;
          height: 36px;
        }

        span {
          margin-top: 3px;
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 16px;
          text-align: left;
          white-space: nowrap;
        }
      }
    }
  }

  .enter_login_box {
    padding: 18px 12px;
    height: 74px;

    li {
      display: flex;
      flex-wrap: nowrap;
    }

    :first-child {
      flex-direction: column;
    }
  }

  .login_info_box {
    padding: 10px 12px;
    height: 74px;

    .vip_badge {
      display: inline-flex;
      width: 52px;
      height: 18px;
      background: url("/imgs/home/vip_bg.webp") no-repeat;
      background-size: 100% 100%;
      align-items: center;
      justify-content: center;
      padding-left: 12px;
      font-family: SF Pro;
      font-size: 12px;
      font-style: italic;
      font-weight: 700;
      line-height: 12px;
      text-align: left;
    }
  }

  .swiperBox {
    position: relative;
    width: 100%;
    margin-bottom: 8px;

    .swiper-slide {
      width: 331px;
      height: 148px;
      transition: all 0.3s ease-in-out;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .swiper-slide-prev {
      transform: scale(0.92);
    }

    .swiper-slide-next {
      transform: scale(0.92);
    }
  }


  .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: #5b6cff;
  }

  .swiper-button-prev {
    width: 40px;
    height: 40px;
    background-color: #fdc401;
  }

  .app_bg {
    position: absolute;
    height: 300px;
    width: 100%;
    z-index: 0;
    top: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 45, 45, 0.18) 0%,
        rgba(255, 45, 45, 0.12) 42.86%,
        rgba(255, 45, 45, 0) 100%);
  }

}

@keyframes fadeInPage {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
